<template>
    <div class="table">
        <!--主体-->
        <div class="container">
            <div class="chatbot">
                <div class="headline">
                    <span class="headline_span">医学罗伯特</span>
                </div>
                <div class="chat_window">
                    <div ref="content" class="content">

                    </div>
                </div>
                <div class="ipt">
                    <el-input
                        resize="none"
                        type="textarea"
                        :rows="2"
                        @keyup.enter.native="send"
                        v-model="textarea">
                    </el-input>
                    <p>
                        <el-button @click="send">发送</el-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Time: '',
                gambit: '',
                textarea: '',
            }
        },
        created() {
            this.Time = this.curentTime()
        },
        methods: {
            curentTime() {
                var now = new Date();
                var year = now.getFullYear();       //年
                var month = now.getMonth() + 1;     //月
                var day = now.getDate();            //日
                var hh = now.getHours();            //时
                var mm = now.getMinutes();          //分
                var ddate = year + "年";
                if (month < 10)
                    ddate += "0";
                ddate += month + "月";
                if (day < 10)
                    ddate += "0";
                ddate += day + "日 ";
                if (hh < 10)
                    ddate += "0";
                ddate += hh + ":";
                if (mm < 10)
                    ddate += '0';
                ddate += mm;
                return (ddate);
            },
            send() {
                if (this.excludeSpecial(this.textarea) != "") {
                    let child = {template: '<div class="sendTime" style="padding: 10px 0;text-align: center;width: 100%;display: flow-root;"><p style="padding: 10px 0;text-align: center;"><span style="display: inline-block;padding: 5px 10px;background: #dadada;border-radius: 3px;font-size: 12px;font-weight: bold;">' + this.Time + '</span></p> </div> <div class="right" style="float: right;width: 100%;text-align: right"> <img style="width: 40px;height: 40px;border-radius: 50%;float: right;" src="static/img/img.jpg" alt=""> <div style="position: relative;background: #9eea6a;padding: 10px 20px 10px 20px;color: rgba(0, 0, 0, 0);border-radius: 4px;border: 1px solid #fff;max-width: 280px;display: inline-block;margin-right: 5px;"class="tip-bubble bubble2"><p style="font-size: 13px;font-weight: bold;text-align:left"><span style="color: #0e141b;">' + this.textarea + '</span></p></div> </div>'};
                    this.textarea = '';
                    this.$refs.content.innerHTML += child.template;
                    let childs = {template: '<div class="sendTime" style="padding: 10px 0;text-align: center;width: 100%;display: flow-root;"><p style="padding: 10px 0;text-align: center;"><span style="display: inline-block;padding: 5px 10px;background: #dadada;border-radius: 3px;font-size: 12px;font-weight: bold;">' + this.Time + '</span></p> </div><div class="left" style="float: left;width: 100%;"><img src="static/img/img2.jpg" alt="" style="width: 40px;height: 40px;border-radius: 50%;float: left;"><div class="tip-bubble bubble1" style="margin-left: 5px;position: relative;background: #fff;padding: 10px 20px 10px 20px;color: rgba(0, 0, 0, 0);border-radius: 4px;border: 1px solid #fff;max-width: 280px;display: inline-block;"><p style="color: #0e141b;font-size: 15px;font-weight: bold;">' + "你好,我是罗伯特,有什么需要帮助的吗!" + '</p></div></div>'};
                    setTimeout(() => {
                        this.$refs.content.innerHTML += childs.template;
                    }, 2000);
                } else {
                    this.$message({
                        message: '内容不能为空！',
                        type: 'warning'
                    });
                }
            },
            /*去除非法字符*/
            excludeSpecial(s) {
                s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '');
                return s;
            },
        }
    }
</script>

<style scoped>
    .container .chatbot {
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 2px;
    }

    .container .chatbot .headline {
        border-bottom: 1px solid #e7e7e7;
        background: #f5f5f5;
    }

    .container .chatbot .headline .headline_span {
        font-size: 16px;
        font-weight: bold;
        font-family: "微软雅黑";
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 10px 0 10px 5%;
    }

    .container .chatbot .chat_window {
        height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
        background: #f5f5f5;
    }

    .container .chatbot .chat_window::-webkit-scrollbar {
        display: none;
    }

    .container .chatbot .chat_window .content {
        padding: 0 20px;
    }

    .container .chatbot .chat_window .sendTime > p {
        padding: 10px 0;
        text-align: center;
    }

    .container .chatbot .chat_window .sendTime > p > span {
        display: inline-block;
        padding: 5px 10px;
        background: #dadada;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;
    }

    .container .chatbot .ipt {
        height: 100px;
        border-top: 1px solid #e7e7e7;
    }
</style>
<style>
    .container .chatbot .ipt > .el-textarea {
        font-size: 15px;
    }

    .container .chatbot .ipt > .el-textarea > .el-textarea__inner {
        border: none;
        padding: 10px 15px;
        font-weight: bold;
    }

    .container .chatbot .ipt > p > .el-button {
        float: right;
        margin-right: 20px;
        padding: 5px 10px;
    }
</style>
